<html>
    <head>
        <style>
            *{margin:0px;padding:0px;}
            #content{width:96%;margin:0px auto;}
        </style>
    </head>
    <body>
        <div id="content">
            
        </div>
    </body>
    <script src="./js/marked.min.js"></script>
    <script>
        function dynamicLoadCss(url) {
            var head = document.getElementsByTagName('head')[0];
            var link = document.createElement('link');
            link.type='text/css';
            link.rel = 'stylesheet';
            link.href = url;
            head.appendChild(link);
        }

        /**
        * 动态加载JS
        * @param {string} url 脚本地址
        * @param {function} callback  回调函数
        */
        function dynamicLoadJs(url) {
            var head = document.getElementsByTagName('head')[0];
            var script = document.createElement('script');
            script.type = 'text/javascript';
            script.src = url;
            head.appendChild(script); 
        }

        function heredoc(fn) {
            return fn.toString().split('\n').slice(1,-1).join('\n') + '\n'
        }

        function parse(fn){
            var tmpl = heredoc(fn) ;
            var rendererMD = new marked.Renderer();
            marked.setOptions({
                renderer: rendererMD,
                gfm: true,
                tables: true,
                breaks: true,
                pedantic: false,
                sanitize: false,
                smartLists: true,
                smartypants: true
            });
            document.getElementById("content").innerHTML = marked(tmpl) ;
        }
    </script>
</html>